<template>
  <!--参数取值必须在标签内。不能单独在template内-->
  <div>
     <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人实践信息</span>
            <el-button style="float: none;" type="text" v-on:click="exportExcel()">导出excel</el-button>
          </div>
          <el-table id="Practice" :data="practice" stripe border >
            <el-table-column label="序号" align="center" width="30">
              <template slot-scope="scope">
                <span>{{ scope.$index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实践主题" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.subject }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实践类别" align="center">
              <template slot-scope="scope">
               <span>{{ scope.row.ptype }}</span>
              </template>
            </el-table-column>
            <el-table-column label="负责人（学号）" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.principal}}</span>
              </template>
            </el-table-column>
            <el-table-column label="团队编号" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.team_id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="团队成员" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.team }}</span>
              </template>
            </el-table-column>
            <el-table-column label="指导教师" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.teacher }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实践开始时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.s_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="实践结束时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.e_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="最终成绩" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.final_acheive }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: "Practice",
  props:['id'],
  data() {
    return {
       practice:[]
    }
  },
  mounted:function(){
    var url='/practice/query';
          this.$http.get(url,{params:{id:this.id}}).then((res) =>{
                  console.log(res);
                  var jsonObject = res.data;
                  this.practice=jsonObject.practices;
              })
              .catch((err) => {
                            this.$notify.error({
                              title: "错误",
                              message: "服务器内部错误",
                            });
                          });
  },
    methods: {
      show() {
        console.log(this.$route.params.id)
      },
    exportExcel () {
        /* generate workbook object from table */
         let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
         let wb = XLSX.utils.table_to_book(document.querySelector('#Practice'), xlsxParam);
         /* get binary string as output */
         let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'practice.xlsx');
         } catch (e)
         {
             if (typeof console !== 'undefined')
                 console.log(e, wbout)
         }
         return wbout
     }
    }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 1300px;
}
</style>
